<template>
    <div class="login-box"> 
        <div class="login">
            <Form ref="formInline" :model="formInline" :rules="ruleInline" >
            <FormItem prop="user">
                <Input type="tel" v-model="formInline.tel" placeholder="电话">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>
            <FormItem prop="password">
                <Input type="password" v-model="formInline.password" placeholder="密码">
                    <Icon type="ios-lock-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formInline')">{{path[text]}}</Button>
                <div>
                    <div type="primary" @click="gotoRegister">{{path[Number(!text)]}}</div>
                </div>
            </FormItem>
        </Form>
        <!-- <div>测试账号：123123（也可自行注册）</div>
        <div>测试密码：123</div> -->

        </div>
    </div>
    
</template>
<script>
import {register, login} from '@/api/api.js'
    export default {
        data () {
            return {
                text:0,
                path:['登录', '注册'],
                formInline: {
                    tel: '',
                    password: '',
                    
                },
                ruleInline: {
                    tel: [
                        { required: true, message: '请输入电话', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        // { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                    ]
                }
            }
        },
        watch :{
            $route:function(val,old) {
                console.log(val,old)
            }
        },
        created(){
            if (this.$route.path == '/login') {
                this.text = 0
            } else {
                this.text = 1
            }
        },
        beforeRouteUpdate(to, from, next) {
            if (to.path == '/login') {
                this.text = 0
            } else {
                this.text = 1
            }
            next()
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (this.text == 0) {
                            //登录
                            this.login()
                        } else {
                            // 注册
                            this.register()
                        }
                    } else {
                        this.$Message.error(this.path[this.text]+'失败!');
                    }
                })
                
            },
            change() {
                if (this.text == 0) {
                    //登录

                } else {
                    // 注册
                }
            },
            gotoRegister() {
                if (this.text == 0) {
                    this.$router.replace('/register')
                } else {
                     this.$router.replace('/login')

                }
               
            },
            register() {
                let data = {
                    "password":this.formInline.password,
                    "phone":this.formInline.tel
                }
                register(data)
                .then(res => {
                    if (res.code == -1) {
                        this.$Message.error(res.msg);
                    } else {
                        this.$Message.success(this.path[this.text]+'成功!');
                    }
                })
                .catch(err => {
                    this.$Message.error(err);
                    console.log(err)
                })
            },
            login() {
                let data = {
                    "password":this.formInline.password,
                    "phone":this.formInline.tel
                }
                login(data)
                .then(res => {
                    if (res.code == -1) {
                        this.$Message.error(res.msg);
                    } else {
                        this.$Message.success(this.path[this.text]+'成功!');
                        window.localStorage.setItem('account_id', res.data.account_id)
                        window.localStorage.setItem('risk_res', res.data.risk_res)
                        window.localStorage.setItem('total_assets', res.data.total_assets)
                        this.$router.replace('/')
                    }
                })
                .catch(err => {
                    this.$Message.error(err);
                    console.log(err)
                })
            }
        }
    }
</script>
<style scoped>
.login-box{
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;

}
.login-box::before{    
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background:transparent url('../../../../assets/img/bg.jpg') center center no-repeat;
    filter:blur(3px);
    z-index:-1;
    background-size:cover;
}
.login{
    min-width: 300px;
    max-width: 400px;
    margin: 40px auto;
    padding: 40px 40px 0;
    background: rgba(225,225,225, .5);
    border-radius: 8px;
}
</style>